<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      lang="en">
<head>
    <!-- Standard Meta 适配移动设备 -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title th:text="'500页面——'+#{web_Name}"></title>
    <meta name="keywords" th:content="#{web_Keywords}">
    <meta name="description" th:content="#{web_Description}">
    <div th:replace="/fragments/header :: common-js"></div>
</head>

<body>
<div id="workingArea">
    <div th:replace="/fragments/header :: menu"></div>
    <br>
    <br>
    <div class="errorContent">
        <div class="ui container">
            <div class="ui raised  segment  errorBackground error">
                <div class="main">
                    <h1 class="status">
                        500
                    </h1>
                    <p>
					<span>
						 阿！糟糕，是什么在召唤我，是
					</span>
                        <span class="error">
						心动！
					</span>
                    </p>
                    <p class="message">
                        服务器偷偷罢工了
                    </p>
                    <div align="center">
                        <a href="/" class="ui teal button">
                            返回
                        </a>
                    </div>
                    <div class="icons">
                        <p>
                            Follow us on:
                        </p>
                        <ul>
                            <li>
                                <a id="wechat" class="ui wechat circular icon button">
                                    <i class="weixin icon">
                                    </i>
                                </a>
                            </li>
                            <li>
                                <a id="QQ" class="ui qq circular icon button">
                                    <i class="qq icon">
                                    </i>
                                </a>
                            </li>
                            <li>
                                <a th:href="#{web_Github}" target="_blank" data-tooltip="点击进入github"
                                   data-position="bottom center" data-inverted="" class="ui circular icon button">
                                    <i class="github icon">
                                    </i>
                                </a>
                            </li>
                            <li>
                                <a th:href="#{web_Csdn}" target="_blank"
                                   data-tooltip="点击进入csdn" data-position="bottom center" data-inverted=""
                                   class="ui circular icon button">
                                    <i class="cuttlefish icon">
                                    </i>
                                </a>
                            </li>
                            <li>
                                <a th:href="#{web_Bilibili}" target="_blank" data-tooltip="点击进入b站"
                                   data-position="bottom center" data-inverted="" class="ui circular icon button">
                                    <i class="bimobject icon">
                                    </i>
                                </a>
                            </li>
                            <div id="wechatPic" class="ui flowing popup transition hidden">
                                <img alt="wechat" src="/images/aboutMe/contactOfWeChat.png" th:src="#{web_Wechat}" class="ui small rounded image">
                            </div>
                            <div id="QQPic" class="ui flowing popup transition hidden">
                                <img alt="QQ" src="/images/aboutMe/contactOfQQ.png" th:src="#{web_QQ}" class="ui small rounded image">
                            </div>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>
    <br>
    <button id="toTop" class="circular ui icon button" style="display: none;">
        <i class="ui caret up icon"></i>
    </button>

    <div th:replace="/fragments/footer :: footer-content"></div>
</div>

<script type="text/javascript" src="/js/error.js" th:src="@{/js/error.js}"></script>

</body>
</html>
